<template>
  <el-cascader
    v-model="dataValue"
    ref="myCascader"
    :options="options"
    :props="{ checkStrictly: true, label: keyLabel, value: keyValue }"
    placeholder="请选择(省、市)"
    :style="`width: ${width}px;`"
    clearable
    @change="handleChange"
  ></el-cascader>
</template>
<script>
import axios from 'axios'
export default {
  name: 'the-cascader',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: '',
    keyLabel: {
      type: String,
      default: 'name'
    },
    keyValue: {
      type: String,
      default: 'id'
    },
    width: {
      type: [String, Number],
      default: '200'
    }
  },
  watch: {
    value(val){
      this.dataValue = val
    }
  },
  data() {
    return {
      dataValue: "",
      options: [],
    };
  },
  created() {
    const _this = this
    axios.get('http://ht.fangkeng.wang/api/v1/area/json').then(pos => {
      const data = pos.data
      if(typeof data === 'string'){
        _this.options = JSON.parse(data)
      }else{
        _this.options = data
      }
    }).catch(err => {
      console.error(err)
    })
  },
  methods: {
    getKey(){
      this.$nextTick(() => {
        return this.$refs.myCascader.getCheckedNodes()[0].pathLabels
      })
    },
    handleChange(arr) {
      this.$emit('change', arr)
    }
  }
};
</script>
<style lang="scss" scoped></style>
